<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="common/head::head">
</head>
<body>
<div class="layui-row">

    <button onclick="editProject('');" class="layui-btn layui-btn-sm">新增项目
    </button>

    <button onclick="reloadTable();" class="layui-btn layui-btn-sm">刷新表格</button>
</div>
<table class="layui-table" id="tab_project" lay-filter="tab_project" style="margin: 0;"></table>

<script type="text/html" id="bar_projects">
    {{# if(d.runMode!=='File'){ }}
    <div class="layui-btn-group">
        <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="manage">控制台</a>
        <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="ram">监控</a>
        {{# if(d.javaCopyItemList && d.javaCopyItemList.length>0){ }}
        <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="javaCopy">副本集</a>
        {{# } }}
    </div>
    {{# } }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="update">配置</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm" lay-event="file">文件</a>
</script>
<script type="text/html" id="status_templ">
    {{# if(d.runMode!=='File'){ }}
    <div title="请到控制台中管理项目">
        <input type="checkbox" id="" disabled name="status" {{# if(d.status){ }}checked{{# } }}
               lay-skin="switch"
               lay-text="运行中|未运行">
    </div>
    {{# }else{ }}
    -
    {{# } }}
</script>

<script type="text/html" id="port_templ">
    {{# if(d.runMode!=='File'){ }}
    <span p-Id="{{d.id}}" title="端口：{{ getItemPort(d) }} 进程id:{{ getItemPId(d) }}">{{ getItemPort(d) }}</span>
    {{# }else{ }}
    -
    {{# } }}
</script>

<script type="text/html" id="toolbarDemo">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="margin-bottom: 0;">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto !important;">分组</label>
                <div class="layui-input-inline">
                    <select name="selectGroup" id="selectGroup" lay-verify="required" lay-filter="groupName"
                            lay-search="">
                        <option value="">请选择</option>
                        <option th:each="item : ${groups}" th:value="${item}" th:text="${item}"></option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</script>

</body>
<script type="text/javascript">
    const apiWhere = {};
    var cachePortInfo;

    var copyIframeWin;

    function getCacheItemInfo(data, key) {
        if (!data.status) {
            return "";
        }
        if (!cachePortInfo) {
            return "";
        }
        if (!cachePortInfo[data.id]) {
            return "";
        }
        return cachePortInfo[data.id][key] || "";
    }

    function getItemPort(data) {
        return getCacheItemInfo(data, 'port');
    }

    function getItemPId(data) {
        return getCacheItemInfo(data, 'pid');
    }

    function loadSuccess() {
        // 获取缓存中的值
        const project = layui.data('project');
        if (project && project["group_$node.id"]) {
            apiWhere.group = project["group_$node.id"];
        }
        tableRender({
            id: 'table_project',
            elem: '#tab_project',
            url: './getProjectInfo',
            toolbar: '#toolbarDemo',
            where: apiWhere,
            cols: [{
                field: 'name', title: '项目名称', width: '15%', sort: true, templet: function (d) {
                    var title = '分组:' + d.group + '  项目Id:' + d.id;
                    title += '  lib状态:' + (d.runLibDesc || "") + " / " + (d.useLibDesc || "");
                    return "<span  title='" + title + "'>" + d.name + "</span >";
                }
            }, {
                field: 'createTime', title: '创建时间', sort: true, width: '13%'
            }, {
                field: 'modifyTime', title: '修改时间', sort: true, width: '13%'
            }, {
                field: 'modifyUser', title: '最后操作人', sort: true, width: '13%'
            }, {
                title: '运行状态',
                templet: "#status_templ",
                sort: true,
                width: '10%'
            }, {
                title: '端口',
                templet: "#port_templ",
                sort: true,
                width: '8%'
            },
                {field: 'op', title: '操作', toolbar: '#bar_projects'}],
            done: function (data) {
                var projects = data.data;
                if (projects) {
                    var ids = [];
                    for (var i = 0; i < projects.length; i++) {
                        var project = projects[i];
                        ids.push(project.id);
                    }
                    getProjectMainPort(ids);
                }
                // 选中
                $("#selectGroup option[value='" + apiWhere.group + "']").attr("selected", "selected");
                form.render();
            }
        });

        function getProjectMainPort(ids) {
            if (ids.length <= 0) {
                return
            }
            silentAjax({
                url: './getProjectPort',
                data: {
                    ids: JSON.stringify(ids)
                },
                success: function (data) {
                    if (200 === data.code) {
                        cachePortInfo = data.data;
                        for (var key in data.data) {
                            $("span[p-Id='" + key + "']").text(data.data[key].port).attr("title", "端口：" + data.data[key].port + "  进程id:" + data.data[key].pid);
                        }
                    }
                }
            });
        }

        form.on('select(groupName)', function (data) {
            changeGroup(data.value);
            reloadTable();
            return true;
        });


        // 表格工具条事件
        table.on('tool(tab_project)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if ('update' === event) {
                editProject(data.id);
            } else if ('manage' === event) {
                // 管理
                manageApplication(data);
            } else if ('javaCopy' === event) {
                layerOpen({
                    type: 2,
                    title: data.id + '- 项目副本集',
                    shade: 0.8,
                    area: ['80%', '60%'],
                    content: './projectCopyLList.html?id=' + data.id,
                    success: function (layero, index) {
                        copyIframeWin = window[layero.find('iframe')[0]['name']];
                    }
                });
            } else if ('file' === event) {
                fileManage(data);
            } else if ('ram' === event) {
                if (!data.status) {
                    layer.msg('请先运行程序！');
                    return;
                }
                var url = "./manage/internal?tag=" + data.id;
                tabChange({
                    id: "ram_" + data.id,
                    url: url,
                    title: data.id + ' - 监控',
                });
            }
        });

        // 文件管理
        function fileManage(data) {
            var url = './manage/file/list.html?id=' + data.id;
            tabChange({
                id: data.id,
                url: url,
                title: data.id + ' - 文件',
            });
        }

        // 管理
        function manageApplication(data) {
            var url = './manage/console?id=' + data.id;
            tabChange({
                id: data.id,
                url: url,
                title: data.id + ' - 管理',
            });
        }
    }

    function changeGroup(group) {
        apiWhere.group = group;
        layui.data('project', {
            key: 'group_$node.id',
            value: group
        });
    }

    function editProject(id) {
        layerOpen({
            type: 2,
            title: '管理项目配置信息',
            shade: 0.8,
            area: ['80%', '90%'],
            content: 'editProject?id=' + id
        });
    }

    function reloadTable() {
        table.reload('table_project', {
            where: apiWhere
        });
    }

    function reloadCopyTable() {
        if (copyIframeWin) {
            copyIframeWin.reloadTable && copyIframeWin.reloadTable();
        }
    }
</script>
</html>
